<template>
  <!-- <el-button size="small"
               type="primary"
               @click="show"
    >查看</el-button> -->
  <!-- <el-dialog :visible.sync="dialogVisible"
               append-to-body
    > -->
  <div id="qrcode">
    <el-tooltip content="点击下载二维码" placement="top-start">
      <div @click="downloadImg" class="qrcode">
        <qrcode v-if="value" :value="value" :options="size"></qrcode>
      </div>
      <!-- </el-dialog> -->
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: "XDqrcode",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      size: {
        size: 50,
      },
    };
  },
  created() {
    console.log(this.$props.value);
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    downloadImg() {
      let canvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas");
      //    let quality = Number
      let str = canvas[0].toDataURL("img/png");
      let img = new Image();
      img.src = str;
      img.onload = () => {
        let c = document.createElement("canvas");
        c.width = "500";
        c.height = "500";
        let myctx = c.getContext("2d");
        myctx.drawImage(img, 0, 0, 50, 50, 0, 0, 500, 500);
        let a = document.createElement("a");
        a.href = c.toDataURL();
        a.download = "二维码";
        a.click();
        this.$message.warning("下载中，请稍后...");
      };
    },
  },
};
</script>
<style scoped>
.qrcode {
  display: flex;
  justify-items: center;
  justify-content: center;
}
</style>
